<template>
    <view class="page" v-if="pageLoad">
        <view class="tab-box" :style="{ height: tabsHeight + 'rpx', paddingTop: statusBarHeight + 'rpx' }">
            <view class="tab">
                <view v-for="(item, index) in tabList" :key="index" class="tab-item" :class="{ 'tab-item-active': index == currentTabIndex }" @click="switchTab(index)">
                    {{ item }}
                </view>
            </view>
            <view class="home-menu" @click="routerPush('/pages/my/my')">
                <uni-icons fontFamily="CustomFont" :size="23" color="#00a8d9">{{ '&#xeaa2' }}</uni-icons>
            </view>
        </view>
        <swiper :style="{ height: swiperHeight + 'rpx' }" :current="currentTabIndex" @change="swiperChange">
            <swiper-item v-for="(item, index) in tabList" :key="index">
                <translate
                    ref="translateRef"
                    :height="swiperHeight"
                    v-if="index == 0"
                    @showTranslate="handleShowTranslate"
                    @translateFullScreen="handleTranslateFullScreen"
                ></translate>
            </swiper-item>
        </swiper>
        <translate-popup
            v-model="showTranslatePopup"
            :type="translateInputType"
            @translateSuccess="translateSuccess"
            @translateFullScreen="handleTranslateFullScreen"
        ></translate-popup>
        <translate-full-screen v-if="!isEmpty(fullScreenData)" :data="fullScreenData" @close="translateFullScreenClose"></translate-full-screen>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
import { routerPush, isEmpty } from '@/assets/js/utils';
import translate from './components/translate.vue';
import { config } from '@/assets/js/config';

const pageLoad = ref(false);
//状态栏高度
const statusBarHeight: any = ref(0);
//tab栏高度
const tabsHeight = ref(88);
//swiper高度
const swiperHeight = ref(0);
onLoad(() => {
    statusBarHeight.value = getRpxBypx(uni.getSystemInfoSync().statusBarHeight);
    swiperHeight.value = getRpxBypx(uni.getSystemInfoSync().windowHeight) - (statusBarHeight.value + tabsHeight.value + 32);
    pageLoad.value = true;
});

//列表相关
const tabList = ref(['翻译']);
const currentTabIndex = ref(0);
const switchTab = (index: number) => {
    currentTabIndex.value = index;
};
const swiperChange = (e: any) => {
    currentTabIndex.value = e.detail.current;
};
//是否显示翻译弹窗
const showTranslatePopup = ref(false);
//翻译输入类型，1文字，2语音
const translateInputType = ref(1);
const handleShowTranslate = (type: number) => {
    showTranslatePopup.value = true;
    translateInputType.value = type;
};

//翻译成功回调
const translateRef: any = ref(null);
const translateSuccess = () => {
    if (translateRef.value) {
        translateRef.value[0].getHistoryList();
    }
};

//根据像素获取rpx数值
const getRpxBypx = (pxValue: any) => {
    return pxValue * (750 / uni.getSystemInfoSync().windowWidth);
};

//翻译全屏
const fullScreenData = ref({});
const handleTranslateFullScreen = (data: any) => {
    fullScreenData.value = data;
};
const translateFullScreenClose = () => {
    setTimeout(() => {
        fullScreenData.value = {};
    }, 500);
};

//分享相关
onShareAppMessage(() => {
    return getShareParam();
});
onShareTimeline(() => {
    return getShareParam();
});
//获取分享参数
const getShareParam = () => {
    return {
        title: `专业${config.targetLangZh}语翻译，语音翻译，旅行、工作必备工具`,
        path: `/pages/index/index`,
        imageUrl: '/static/img/share.jpg'
    };
};
</script>

<style lang="scss" scoped>
.page {
    min-height: 100vh;
    background-color: #f7f8fa;
}
.tab-box {
    display: flex;
    align-items: center;
    padding: 0 32rpx 32rpx 16rpx;
    background-color: #f7f8fa;
    .tab {
        display: flex;
        align-items: center;
        .tab-item {
            font-size: 38rpx;
            color: #999;
            padding: 0 16rpx;
        }
        .tab-item-active {
            font-size: 44rpx;
            color: #000;
            font-weight: bold;
            position: relative;
            display: flex;
            justify-content: center;
        }
        .tab-item-active::after {
            content: ' ';
            width: 50rpx;
            height: 10rpx;
            background: $primary;
            border-radius: 30rpx;
            position: absolute;
            bottom: -16rpx;
        }
    }
}

.home-menu {
    width: 80rpx;
    height: 80rpx;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8rpx 0 0 32rpx;
}
</style>
